<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" text-color="#0C131B"
            active-text-color="#3A4B5A" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.children && item.children[0].type != 'FUNC'">
                    <el-submenu :index="item.router" :key="item.router">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span style="color:#0C131B" slot="title">{{ item.name }}</span>
                            <!-- <div>{{ item.tibetName }}</div> -->
                        </template>
                        <template v-for="subItem in (item.children)">
                            <el-submenu v-if="subItem.children && subItem.type != 'FUNC'" :index="subItem.router"
                                :key="subItem.router">
                                <template slot="title">
                                    {{ subItem.name }}
                                    <!-- <div>{{ item.tibetName }}</div> -->
                                </template>
                                <!-- <el-menu-item v-for="(threeItem,i) in (subItem.children)"  :key="i" :index="threeItem.router"  :class="'/'+$route.path.split('/')[1]==item.router?'is-active':''">
	                                {{ threeItem.name }}
	                            </el-menu-item> -->
                            </el-submenu>
                            <el-menu-item v-if="!subItem.children && subItem.type != 'FUNC'" :index="subItem.router"
                                :key="subItem.router" :class="'/' + $route.path.split('/')[1] == item.router ? 'is-active' : ''">
                                {{ subItem.name }}
                                <!-- <div>{{ item.tibetName }}</div> -->
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item style="position: relative" :index="item.router" :key="item.router"
                        v-if="item.type != 'FUNC'" :class="'/' + $route.path.split('/')[1] == item.router ? 'is-active' : ''">
                        <i :class="item.icon"></i>
                        <span style="color:#ffffff" slot="title">{{ item.name }}</span>
                        <!-- <span slot="title">{{ item.tibetName }}</span> -->
                        <!-- <span style="color:#000;position: absolute ;left:38px; top: 20px" slot="title">&nbsp&nbsp{{item.tibetName}}</span> -->
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    inject: ['reload'],
    data() {
        return {
            qwe: '',
            collapse: false,
            items: [
                {
                    icon: 'el-icon-s-home',
                    index: 'dashboard',
                    title: '首页'
                }
            ],
            item1: []
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    methods: {
        changeApp(id) {
            this.qwe = localStorage.getItem("qwe")
            var type = localStorage.getItem("type")

            let appMenus = this.$util.get("userInfo").appMenus;
            var list = []
            if (this.$util.get("userInfo").userInfo.userType == "GOV") {

                for (var r = 0; r < appMenus.length; r++) {
                    if (appMenus[r].appId == "001") {
                        list.push(appMenus[r])
                    }
                }
                appMenus = list

            } else {
                appMenus = appMenus
            }
            // for(var )

            if (appMenus && appMenus.length > 0) {
                var position = 0;
                if (id) {
                    for (var i = 0; i < appMenus.length; i++) {
                        if (appMenus[i].appId == id) {
                            position = i;
                            break;
                        }
                    }
                }
                var TabStatus = sessionStorage.getItem("setTabStatus")
                if (TabStatus == "sss" || TabStatus == null) {

                    let slide = []
                    let Menus = appMenus[position].flowMenus;
                    if (Menus != null && Menus.length > 0) {
                        this.items = Menus
                    }
                    this.$router.push({
                        path: this.items[0].router
                    })
                    localStorage.setItem('panduanzhuangtai', JSON.stringify(appMenus[position].flowMenus))
                } else {
                    let Menus1 = appMenus[position].configMenus;
                    // let first = Menus1.shift()
                    // console.log(first);

                    if (Menus1 != null && Menus1.length > 0) {
                        this.items = Menus1
                    }
                    this.$router.push({
                        path: this.items[0].router
                    })
                    localStorage.setItem('panduanzhuangtai', JSON.stringify(appMenus[position].configMenus))
                }
                // console.log(appMenus[position].configMenus)
            }
        },
        filterMenu(menu) {
            for (var i = 0; i < menu.length; i++) {
                if (menu[i].type != "MENU") {
                    menu.splice(i, 1);
                }
            }
            return menu;
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
        bus.$on('changeApp', val => {
            this.changeApp(val.appId);
        });
        var tabtype = sessionStorage.getItem("tabtype")
        if (tabtype == null || tabtype == undefined) {
            this.changeApp()
        }
        this.qwe = localStorage.getItem("qwe")
    }
};
</script>

<style scoped lang="less">

i {
    display: inline-block;
    width: 30px;
    text-align: center;
}

.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    // background-color: #6C7D92;
}

/deep/.el-menu-item {
    line-height: 45px;
}

/deep/.el-menu {
     background: #02B386;
    min-height: 100%;
}

.sidebar::-webkit-scrollbar {
    width: 64px;
}

/deep/.el-submenu__title:hover {
    // background: #6C7D92;
}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
    min-height: 100%;
    // background: #6C7D92;
}


.el-submenu {
    // background: #6C7D92;
}

.el-submenu .el-menu-item {
    padding-left: 52px !important;
}

/* 设置鼠标悬停时sidebar-el-menu的样式 */
.el-tooltip__popper.is-dark {
    span {
        color: #409EFF !important;
    }
}

.sidebar-el-menu .el-menu-item:hover {
    background-color: #00d7a1 !important;
}

.sidebar-el-menu .el-menu-item:hover span {
    color: #ffffff !important;
}

.sidebar-el-menu .el-menu-item:hover i {
    color: #ffffff !important;
}

.sidebar-el-menu .el-menu-item.is-active {
    color: #ffffff !important;
    background: #03916D !important;

    span {
        color: #ffffff !important;
    }

    i {
        color: #ffffff !important;
    }
}

.el-submenu__title .iconfont {
    color: #ffffff;
    margin: 0 5px 0 3px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle
}

.el-menu-item i {
    color: #ffffff;
}</style>
